<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色列表</title>
    <!--bootstrap-select  css文件-->
    <link rel="stylesheet" type="text/css" href="js/bootstrapselect/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="js/bootstrapselect/css/bootstrap-select.css"/>
    <!--弹窗 css文件-->
    <link rel="stylesheet" type="text/css" href="js/layer/layer.css">
    <!--文件树插件 css文件-->
    <link rel="stylesheet" type="text/css" href="js/jstree/css/style.min.css">
    <!--主要css样式-->
    <link rel="stylesheet" type="text/css" href="css/models.css">
</head>
<body>
<div class="MainContent">
    <!--主体内容-->
    <div class="MainCont">
        <div class="ph_snbBtn">
            <button class="columnBtn" name="" value="导出">导出</button>
            <button class="columnBtn js_addLabour" name="" value="添加角色">添加角色</button>
            <!--<button class="columnBtn js_editLabour" name="" value="编辑">编辑</button>
            <button class="columnBtn" name="" value="启用">启用</button>
            <button class="columnBtn" name="" value="禁用">禁用</button>
            <button class="columnBtn js_allot" name="" value="分配角色">分配权限</button>-->
        </div>
        <!--筛选条件-->
        <div class="ph_screen">
            <table class="ph_tableBox">
                <tr>
                    <th>角色名称：</th>
                    <td><input name="" type="text"></td>
                    <th>状态：</th>
                    <td>
                        <select class="selectpicker">
                            <option value="">全部</option>
                            <option value="">冻结</option>
                            <option value="">正常</option>
                        </select>
                    </td>
                    <td colspan="2">
                        <input name="" type="button" value="搜索"><input name="" type="button" value="重置">
                    </td>
                </tr>
            </table>
        </div>
        <!--end 筛选条件-->
        <!--列表-->
        <div class="ph_wareBox ph_tabScroll">
            <table class="ph_wareList" id="example"></table>
        </div>
        <!--end 列表-->
    </div>
    <!--end 主体内容-->
</div>
<!--添加编辑用户弹窗-->
<div class="PopupBox" id="ph_userBox">
    <!--内容-->
    <div class="ph_subPoCon">
        <form id="formID">
            <ul class="addList">
                <li><label for=""><span class="require">*</span>角色名称：</label><input class="memberTxt validate[required]" name="" type="text" placeholder="请输入用户名称"></li>
                <li><label for="">角色描述：</label><textarea class="ph_txtAreaBg" name="" id="" cols="30" rows="10"></textarea></li>
            </ul>
        </form>
    </div>
    <!--end 内容-->
</div>
<!--end 添加编辑用户弹窗-->
<!--分配权限弹窗-->
<div class="PopupBox" id="ph_allotBox">
    <!--内容-->
    <div class="PopupCon">
        <div class="menuTreeCon" id="menuTree"></div>
    </div>
    <!--end 内容-->
</div>
<!--end 分配权限弹窗-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--bootstrap-select-->
<script type="text/javascript" src="js/bootstrapselect/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrapselect/bootstrap-select.js"></script>
<script type="text/javascript" src="js/bootstrapselect/select.js"></script>
<!--验证-->
<script type="text/javascript" src="js/validat/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="js/validat/jquery.validationEngine.js"></script>
<!--分页-->
<script type="text/javascript" src="js/pages/jquery.dataTables.min.js"></script>
<!--文件树插件-->
<script type="text/javascript" src="js/jstree/jstree.min.js"></script>
<!--弹窗-->
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript">
    $(function() {
        $("#formID").validationEngine({
            addPromptClass: 'formError-text',
            showArrow: false,
            promptPosition: 'bottomLeft:10 0'
        });
        //添加角色
        $('.ph_snbBtn').on('click','.js_addLabour,.js_editLabour',function(){
            layer.open({
                type: 1,
                title: '添加角色',
                closeBtn : 1,
                area: ['460px','340px'],
                //maxmin: true,
                btn:['保存','取消'],
                btnAlign: 'c',
                content: $('#ph_userBox')
            });
        });
        //编辑角色
        $('.ph_wareBox').on('click','.js_addLabour,.js_editLabour',function(){
            layer.open({
                type: 1,
                title: '编辑角色',
                closeBtn : 1,
                area: ['460px','340px'],
                //maxmin: true,
                btn:['保存','取消'],
                btnAlign: 'c',
                content: $('#ph_userBox')
            });
        });
        //删除
        $('.ph_wareList').on('click','.Js_delete',function(){
            layer.confirm('确定此操作吗？',{
                title: '删除',
                icon: 3,
                btnAlign: 'c',
                closeBtn : 0
            },function(index){
                layer.alert('操作成功', {icon: 1,btnAlign: 'c', closeBtn : 0});
                //layer.close(index);
            });
        });
        //分配权限
        $('.ph_wareBox').on('click','.js_allot',function(){
            layer.open({
                type: 1,
                title: '分配权限',
                closeBtn : 1,
                area: ['666px','440px'],
                btn:['保存', '取消'],
                btnAlign: 'c',
                content: $('#ph_allotBox')
            });
        });
        $('#example').DataTable({
            "bServerSide": true,
            "sPaginationType": "full_numbers",
            //"bJQueryUI": true,
            "sDom": '<"">t<"F"ip>',
            "autoWidth": false,  //自适应宽度
            //"sAjaxSource": "${ctx}/api/user/list", //ajax调用接口
            //<div class="btn-group" style="text-align:left;"><button type="button" class="btn btn-info dropdown-toggle"data-toggle="dropdown">操作 <span class="caret"></span></button>
            "sAjaxSource": "data/arrays.txt", //ajax调用接口
            "aoColumnDefs": [{sDefaultContent: '', orderable: false , aTargets: [ '_all' ] }],
            "aoColumns": [
                /*{ "sWidth": "40px","sTitle" : "<input class= \"check-all\" name=\"\" type=\"checkbox\">", "mData": "id","mRender": function(){
                    return '<input class="ids" name="" type="checkbox">';
                }},*/
                { "sWidth": "80px","sTitle" : "编号", "mData": "id"},
                { "sTitle" : "角色名称","mData": "id2" },
                { "sTitle" : "角色描述","mData": "id2" },
                { "sTitle" : "添加时间","mData": "id3"},
                { "sTitle" : "状态","mData": "id8","mRender": function(){
                    // return '<span class="gray">已禁用</span>';//gray 灰色
                    return '<span>已启用</span>';  //默认颜色就不用加样式名
                }
                },
                { "sWidth": "110px", "sTitle" : "操作","mData" : "id","sClass":"ph_tableShow", "mRender" : function ( data, type, full ) {
                    var text = '<div class="operateBox"><input class="operate" name="" type="button" value="操作选项">';
                    text += '<ul class="operateList hide" role="menu">';
                    text += '<li><a class="js_Frozen" href="javascript:void(0);">启用</a></li>';
                    text += '<li><a class="Js_Enable" href="javascript:void(0);">禁用</a></li>';
                    text += '<li><a class="js_addLabour" href="javascript:void(0);">编辑</a></li>';
                    text += '<li><a class="Js_delete" href="javascript:void(0);">删除</a></li>';
                    text += '<li><a class="js_allot" href="javascript:void(0);">分配权限</a></li>';
                    text += '</ul></div>';
                    return text;
                }
                }
            ],
            "oLanguage" : {
                "sProcessing" : "数据加载中······",
                "sLengthMenu" : "显示 _MENU_ 条记录",
                "sZeroRecords" : "没有您要搜索的内容！",
                "sEmptyTable" : "列表中无数据存在！",
                "sInfo" : "当前显示 _START_ 到 _END_ 条数据，共 _TOTAL_ 条数据",
                "sInfoEmpty" : "显示 0 到 0 条记录",
                "sInfoFiltered" : "数据列表中共  _MAX_ 条记录",
                "oPaginate" : {
                    "sFirst" : "首页",
                    "sPrevious" : "上一页",
                    "sNext" : "下一页",
                    "sLast" : "末页"
                }
            }
            /*"fnServerData" : function ( sSource, aoData, fnCallback, oSettings ) {
               oSettings.jqXHR = $.ajax( {
                   "dataType" 	: 'json',
                   "type" 		: "GET",
                   "async"     : 'false',
                   "url" 		: sSource,
                   "data" 		: {
                       'pageNum': (aoData[3].value/aoData[4].value)+1,
                       'pageSize' :  aoData[4].value,
                       'telphone'  :  $("#telphone").val(),
                       'isable' : $('#isable').val()
                   },
                   "success"	: fnCallback
               } );
           }*/
        });
        //文件树
        // JSON数据
        var jsonData =  [{
            "text" : "所有服务器",
            "state" : { "opened" : true },
            "children" : [
                {
                    "text" : "商品管理",
                    "state" : { "opened" : false },
                    "children" : [{
                        "text" : "机务" ,
                        "state" : { "opened" : false },
                        "children" : [
                            { "text" : "京AC3456"},
                            { "text" : "京AC3456"},
                            { "text" : "京AC3456"},
                            { "text" : "京AC3456"},
                            { "text" : "京AC3456"},
                            { "text" : "京AC3456"}
                        ]
                    },
                        { "text" : "其他" }]
                },
                {
                    "text" : "商品分类" ,
                    "state" : { "opened" : false },
                    "children" : [{
                        "text" : "机务" ,
                        "state" : { "opened" : false },
                        "children" : [
                            { "text" : "京AC3456"},
                            { "text" : "京AC3456"},
                            { "text" : "京AC3456"},
                            { "text" : "京AC3456"},
                            { "text" : "京AC3456"},
                            { "text" : "京AC3456"}
                        ]
                    },
                        { "text" : "其他" }]
                },
                { "text" : "货源管理" },
                { "text" : "订单管理" },
                { "text" : "商户管理" }
            ]
        }];
        $('#menuTree').jstree({
            plugins : ["checkbox","sort","types","wholerow"],
            "types" : { "default" : { "icon" : false } },
            'core' : {
                'data' : jsonData
            }
        });
    });
</script>
</body>
</html>